<template> 
    <div class="mask">
        <div class="bigmask">
            <div class="title">你选择的是：<span>{{cid.name}}</span></div>
            <div class="search">
                <!--<mu-icon-button icon="search" class="btn"/>
                <span class="mu-icon material-icons">search</span>-->
                
                <input type="text" placeholder="请输入搜索关键字"  @keyup='keyrun' ref='inputS'>
                <button class="mu-icon material-icons btn" @click='search'>search</button >
                
            </div>
            
        </div>
        <div class="close" @click='close'></div>
    </div>
</template>
<script>

    export default {
        data(){
            return{
                show:false,
                value:' ',

            }
        },
        props:{
            cid:'',
        },

        methods:{
            keyrun(){
                this.value=this.$refs.inputS.value
            },
            close(){
                this.$emit('mask-say',this.show)
                this.$refs.inputS.value=''
            },
            search(){
                this.$router.push({ name: 'showpage', params: { cid: this.cid.cid,keyword:this.value}})
            }
            
        }
    }
</script>
<style lang="less" scoped>
.mask{
    position: fixed;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
    .bigmask{
        height: 20%;
        text-align: center;
        background-color: white;
        .title{
            padding-top: 5%;
            font-size: 24px;
            span{
                color: #009688;
            }
        }
        .search{
            padding-top: 5%;
        }
        input{
            border: 1px solid #009688;
            vertical-align: top;
            height: 28px;
        }
        input:focus{
            outline:none;
        }
        .btn{
            padding: 0;
        }
    }
    .close{
        height: 80%;
        background-color: rgba(0,0,0,.4);
    }
}
    
</style>